<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/pc_master">
<div layout:fragment="content">
    <div th:replace="layout/m_layout::systemJs"></div>
    <style type="text/css">
        .section-left { width: 750px; float: left; }
        .section-right { width: 380px;min-height: 200px; float: right;  }
        .page-content { animation:bounceInUp 1s ease-out .0s; }


        .page_moment_create .bcui-photo-list {
            padding: 0;
            margin-right: -10px;
        }
        .page_moment_create {
        }
        .page_moment_create .bcui-form {
            padding: 30px;
            border-radius: 10px;
        }
        .page_moment_create .bcui-form textarea {
            padding: 15px;
            font-size: 16px;
            border: none;
            text-indent: 0;
            background-color: #F9F9F9;
        }

        .page_moment_create .bcui-photo-list .addbtn {
            background: #EEE;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .page_moment_create .bcui-photo-list .addbtn::after, .page_moment_create .bcui-photo-list .addbtn::before {
            background: #FFF;
            cursor: pointer;
        }

        .page_moment_create .bcui-form .foot {
            padding: 0px 0;
            padding-top: 5px;
            overflow: hidden;
            color: #999;
            font-size: 14px;
            line-height: 40px;
            margin-top: 20px;
        }
        .page_moment_create .bcui-form .foot .left {
            float: left;

        }
        .page_moment_create .bcui-form .btnbox {
            float: right;
            text-align: right;
        }

    </style>
    <link rel="stylesheet" href="/pc/css/pictureViewer.css">
    <input type="hidden" id="filedir" name="filedir" value="momen">
    <!-- s: 导航 -->
    <div class="breadcrumb-wrap">
        <div class="layui-main clearfix">
            <div class="breadcrumb">
                <a href="/">首页</a> - 单身圈
            </div>
        </div>
    </div>
    <!-- e: 导航 -->
    <section class="section page-content">
        <div class="layui-main clearfix">
            <div class="section-left">
                <form id="thisform" action="/m/ajax/momen/create" bottlecms-form-ajax="" target="/moment"
                      method="post">
                    <div class="bcui-form">
                        <div class="form-item">
                            <textarea name="content" placeholder="说说此刻的想法…" class="content"
                                      style="height:120px"></textarea>
                        </div>

                        <textarea name="media" style="display: none;"></textarea>
                        <!-- 图片 -->
                        <input type="hidden" name="media_type" value="image">

                        <ul class="bcui-photo-list photobox">
                            <li class="addbtn bcui-upload-box">
                                <input type="file" class="addpics" accept="image/*"/>
                            </li>
                        </ul>
                        <input type="hidden" name="latitude" value="">
                        <input type="hidden" name="longitude" value="">
                        <input type="hidden" name="location" value="">
                        <div class="foot">
                            <div class="left">
                                <div class="locationbox" style="padding-left:0; padding-right: 0;">
                                    <span class="left-icon"><i class="icon-bottlecms-11"></i></span>
                                    <span class="item-title">
                                    所在位置
                                </span>
                                    <span class="item-info layui-form">
                                    <input type="checkbox" name="location_switch" title="" lay-skin="primary" checked>
                                </span>
                                </div>
                            </div>
                            <div class="btnbox">
                                <button type="submit" class="submit btn  ">发表</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="section-right">
                <!-- s: 脱单宝典 -->
                <div class="bcui-widget bcui-widget-article">
                    <h5 class="title">脱单宝典</h5>
                    <ul class="lists">
                        <li class="item _text" th:each="item:${article}">
                            <a th:href="'/article/info/'+${item.id}" th:text="${item.title}">
                            </a>
                        </li>

                    </ul>
                </div>
                <!-- e: 脱单宝典 -->

            </div>
        </div>
    </section>


</div>
<div layout:fragment="contentFooter">
    <script id="javascript-bottlecms-moment-page" type='text/javascript'
            src="/m/js/moment/bottlecms-moment-page.js"></script>
    <script src="/m/js/moment/create-image.js" type="text/javascript" th:if="${mediaType eq 'image'}"></script>
    <script src="/m/js/moment/create-video.js" type="text/javascript" th:if="${mediaType eq 'video'}"></script>
    <script type="text/javascript">
        $('.js-submit').click(function (event) {
            $('#thisform').submit();
        });
        $("textarea.content").focus();
    </script>
<!--    <link rel="stylesheet" href="/pc/css/moment/bottlecms-moment-page.css">-->
</div>
</html>